<div class="docs-component-category-list-summary docs-markdown"
     id="category-summary"
     focusOnNavigation>
  <div [innerHTML]="_categoryListSummary"></div>
</div>
@if (items.length > 0) {
  <div class="docs-component-category-list">
    @for (component of items; track component) {
      @if (component.externalRedirect) {
        <a class="docs-component-category-list-item" [href]="component.externalRedirect">
          <ng-container [ngTemplateOutlet]="card" [ngTemplateOutletContext]="{component}"/>
        </a>
      } @else {
        <a class="docs-component-category-list-item"
          [routerLink]="'/' + section + '/' + component.id">
          <ng-container [ngTemplateOutlet]="card" [ngTemplateOutletContext]="{component}"/>
        </a>
      }
    }
  </div>
}

<ng-template #card let-component="component">
  <div class="docs-component-category-list-card" matRipple>
    @if (section === 'components') {
      <img class="docs-component-category-list-card-image-wrapper"
          [src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
          loading="lazy"
          alt=""
          role="presentation"
          aria-hidden="true">
    }
    <div class="docs-component-category-list-card-title">{{component.name}}</div>
    <div class="docs-component-category-list-card-summary">{{component.summary}}</div>
  </div>
</ng-template>
